<template>
    <div class="app-container">
        <div class="search-container">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                <el-form-item label="关键词">
                    <el-input v-model="queryParams.keywords" class="min120" placeholder="请输入关键词" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"><i-ep-search />搜索</el-button>
                    <el-button><i-ep-refresh />重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-card shadow="never">

          

            <el-table 
            :key="reload" 
            ref="dataTableRef"
            v-loading="loading" 
            :data="dataList"
            align="left"
            tooltip-effect="dark" 
            :show-overflow-tooltip="true" 
            border
           
            @selection-change="handleSelectionChange"
      
            >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="id" width="80" align="center" prop="id" />
                <el-table-column label="工程名称" align="center" prop="name">
                    <template #default="scope">
                       <span>{{scope.row.name}}</span>
                    </template>
                </el-table-column >
                <el-table-column label="所属公司" width="200" align="center" prop="company" />
                <el-table-column label="负责人"  width="200"  align="center" prop="user" />
                <el-table-column label="添加时间" width="200" align="center" prop="addtime" />
                <el-table-column fixed="right" align="center" label="操作" width="200">
                    <template #default="scope">
                  
                        <el-button type="primary" size="small" link @click="handleEdit(scope.row)">
                            <i-ep-edit />查看
                        </el-button>
                     
                    </template>
                </el-table-column>
            </el-table>
            <pagination 
                v-if="total > 0" 
                v-model:total="total" 
                v-model:page="queryParams.page"
                v-model:limit="queryParams.limit"
                @pagination="handleQuery" />

        </el-card>

        <!-- 新增内容 -->
        <el-dialog 
            v-model="dialogAdd.visible"
            class="elDiaLog"
            lock-scroll
            :title="dialogAdd.title" 
            width="600px"
            @close="handleCancle">
            <el-form
                ref="dataFormRef" 
                :model="formData" 
                :rules="rules" 
                label-width="100px">
                <el-form-item required label="工程名称" prop="name">
                    <el-input v-model="formData.name" />
                </el-form-item>
                <el-form-item required label="所属公司" prop="company">
                    <el-input v-model="formData.company" />
                </el-form-item>
                <el-form-item required label="负责人" prop="user">
                    <el-input v-model="formData.user" />
                </el-form-item>
            </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="handleSubmit">确定</el-button>
                        <el-button  @click="handleCancle">取消</el-button>
                    </div>
                </template>
        </el-dialog>


    </div>
</template>
<script setup lang="ts">

defineOptions({
    name: "Doc",
    inheritAttrs: false,
});

import { genFileId, ClickOutside as vClickOutside, UploadInstance } from 'element-plus'
import { useRoute } from 'vue-router';
import Editor from "@/components/WangEditor/index.vue";
import router from '@/router';
//接口地址
import { } from "@/api/engine";


const queryFormRef = ref(ElForm);
const dataFormRef =ref(ElForm)

const queryParams = reactive({
    page: 1,
    limit: 20,
    keywords: ""
})

const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);
const route = useRoute();
var reload = ref();

const dataList = ref();

const dialogAdd = reactive<DialogOption>({
    visible: false,
});

const formData = ref({
    id:"",
    name:"",
    company:"",
    user:"",
    addtime:""
});

const rules = ref();


function handleQuery() {
    console.log('初始化数据')
    var newData = []
    for(var i =1;i<99;i++)
    {
        newData.push( { id: i, name: '工程名称' + i, company: "所属公司", user: '王五'+i, addtime: "2024-03-11" },)
    }
    total.value = 98;
    dataList.value = newData;
}

function handleSelectionChange(selection:any){
    ids.value = selection.map((item: any) => item.id);
}

function handleAdd(){
    console.log('新增内容')
    dialogAdd.visible = true;
    dialogAdd.title='添加信息'

    console.log(formData.value)
    nextTick(()=>{
        dataFormRef.value.resetFields()
      })
   
}
function handleEdit(el:any){
    console.log('编辑内容')
    dialogAdd.visible = true;
    dialogAdd.title='编辑信息'

    nextTick(()=>{
        formData.value= Object.assign({},el);
    })
  
}
function handleDelete(Id?:number){
    const Ids = [Id || ids.value].join(",");
    if (!Ids) {
      ElMessage.warning("请勾选删除项");
      return;
    }
    // loading.value = true;
    ElMessage({
        showClose: true,
        message: '删除成功',
        type: 'success',
    })
}
function handleSubmit(){
    console.log('点击提交信息or编辑信息')
    if(formData.value.id)
    {
        console.log('编辑')
    }
    else{
        console.log('新增')
    }
}
function handleCancle(){

    dialogAdd.visible=false;
    dialogAdd.title='';
  
}

onMounted(() => {
    handleQuery();
})

</script>
<style lang="scss" scoped></style>